<template>
  <article class="wrapper">
    <h1 class="text-3xl font-medium">{{ article.title }}</h1>
    <p class="text-gray-600">
      Article last updated:
      <time>{{ formatDate(article.updatedAt) }}</time>
    </p>

    <nav>
      <ul>
        <li v-for="link of article.toc" :key="link.id">
          <NuxtLink :to="`#${link.id}`">{{ link.text }}</NuxtLink>
        </li>
      </ul>
    </nav>

    <nuxt-content :document="article" />
  </article>
</template>

<script>
import { formatDate } from '@/utils';

export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch();

    return { article };
  },
  methods: {
    formatDate,
  },
};
</script>

<style scoped>
.wrapper {
  padding: 64px 0;
}
</style>
